<style scoped lang="scss">
.list-top {
  width: 10rem;
  height: 1.0667rem;
  background-color: #FF6040;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
}

.list-top span {
  display: inline-block;
  width: 0.2rem;
  height: 0.2rem;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(225deg);
  margin: 0 0.4rem;
  position: absolute;
  left: 0;
  top: 0.4533rem;
}

.list-top p {
  font-size: 0.4267rem;
  color: #fff;
  position: absolute;
  left: 1.0667rem;
  top: 0.2267rem;
}

.list-top h2 {
  font-size: 0.48rem;
  color: #fff;
  margin: 0 0.4rem;
  font-weight: 400;
}

.datalis-img {
  width: 10rem;
  height: 10rem;
  background-color: pink;
}

.datalis-center h3 {
  font-size: 0.48rem;
  font-weight: 500;
}

.datalis-center p {
  font-size: 0.48rem;
  font-weight: 500;
}

.datalis-buttom {
  width: 10rem;
  height: 1.3333rem;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
}

.datalis-buttom ul {
  display: flex;
  list-style: none;
}

.datalis-buttom ul li {
  font-size: 0.4267rem;
  color: black;
  margin-right: 0.2667rem;
}

.datalis-buttom .datalis-button {
  width: 5.8667rem;
  height: 1.0667rem;
  display: flex;
}

.datalis-buttom .datalis-button .button1 {
  width: 2.9333rem;
  height: 1.0667rem;
  background: linear-gradient(to right, #ffd01e, #ff8917);
  border-radius: 0.6667rem 0 0 0.6667rem;
  border: 0;
  color: $w;
}

.datalis-buttom .datalis-button .button2 {
  width: 2.9333rem;
  height: 1.0667rem;
  background: linear-gradient(to right, #ff6034, #ee0a24);
  border-radius: 0 0.6667rem 0.6667rem 0;
  border: 0;
}
</style>
<template>
  <div class="details">
    <div class="list-top">
      <a href="#">
        <span></span>
        <p>
          返回
        </p>
      </a>
      <h2>
        商品详情
      </h2>
    </div>
    <div class="datalis-img">
      <img src="" alt="">
    </div>
    <div class="datalis-center">
      <h3>
        商品名称
        <span>122121</span>
      </h3>
      <p>
        商品价格
        <span>8080￥</span>
      </p>
    </div>
    <div class="datalis-buttom">
      <ul>
        <li>
          客服
        </li>
        <li>
          购物车
        </li>
        <li>
          店铺
        </li>
      </ul>

      <div class="datalis-button">
        <button class="button1">加入购物车</button>
        <button class="button2">立即购买</button>
      </div>
    </div>
  </div>
</template>